<template>
  <section class="classify" >
    <!--style="background-size: 100%" :style="{backgroundImage: 'url('+back+')', backgroundSize: '100%'}"-->
    <div class="navClassify" v-lazy:background-image="back">
      <div class="box">
        <nav id="nav">
          <span class="cubeic-back" @click="clickBack"></span>
          每日逛
        </nav>
        <div class="swiper-container swiper-container-initialized swiper-container-horizontal" id="swiper-container">
          <ul class="swiper-wrapper">
            <li class="swiper-slide"
                v-for="item of classify"
                @click="classifyClick(item.id)"
                :key="item.id">
              <p :class="{active: current == item.id}">{{item.name}}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import $ from 'jquery'
export default {
  name: 'Classify',
  props: ['back'],
  data () {
    return {
      classify: [
        {
          id: 0,
          name: '爱要表达'
        },
        {
          id: 1,
          name: '大牌好物'
        },
        {
          id: 2,
          name: '低价抢大牌'
        },
        {
          id: 3,
          name: '边看边买'
        },
        {
          id: 4,
          name: '购物指南'
        },
        {
          id: 5,
          name: '二手优品'
        },
        {
          id: 6,
          name: '新品首发'
        },
        {
          id: 7,
          name: '发现好物'
        }
      ],
      current: 0,
      swiperIndex: 0 // 导航的位置下标
    }
  },
  methods: {
    clickBack () {
      this.$router.go(-1)
    },
    classifyClick (id) {
      this.current = id
      this.swiperIndex = id
      let mySwiper = new Swiper('.swiper-container', {
        slidesPerView: 4 // 一页显示四个
      })
      let swiperWidth = mySwiper.container[0].clientWidth // 获取整个demo的宽度
      let maxTranslate = mySwiper.maxTranslate() // 设置最大的偏移量
      let maxWidth = -maxTranslate + swiperWidth / 2 // 最大宽度
      $('.swiper-container').on('touchstart', function (e) {
        e.preventDefault()
      })
      mySwiper.on('tap', function (swiper, e) {
        let slide = swiper.slides[swiper.clickedIndex]
        let slideLeft = slide.offsetLeft
        let slideWidth = slide.clientWidth
        let slideCenter = slideLeft + slideWidth / 2
        // 被点击slide的中心点
        mySwiper.setWrapperTransition(300)
        if (slideCenter < swiperWidth / 2) {
          mySwiper.setWrapperTranslate(0)
        } else if (slideCenter > maxWidth) {
          mySwiper.setWrapperTranslate(maxTranslate)
        } else {
          let nowTlanslate = slideCenter - swiperWidth / 2
          mySwiper.setWrapperTranslate(-nowTlanslate)
        }
      })
      // 点击后更新数据，把数据id传给父元素
      this.$emit('getNum', id)
    },
    // 导航左右滑动
    swiperPosition () {
      let mySwiper = new Swiper('.swiper-container', {
        slidesPerView: 4
      })
      let swiperWidth = mySwiper.container[0].clientWidth
      let maxTranslate = mySwiper.maxTranslate()
      let maxWidth = -maxTranslate + swiperWidth / 2
      // 默认位置
      let slide = document.getElementsByClassName('swiper-slide')[this.swiperIndex]
      slide.children[0].classList.add('active')
      console.log(slide)
      let slideLeft = slide.offsetLeft
      let slideWidth = slide.clientWidth
      let slideCenter = slideLeft + slideWidth / 2
      // 被点击slide的中心点
      mySwiper.setWrapperTransition(300)
      if (slideCenter < swiperWidth / 2) {
        mySwiper.setWrapperTranslate(0)
      } else if (slideCenter > maxWidth) {
        mySwiper.setWrapperTranslate(maxTranslate) // mySwiper.setWrapperTranslate（）代表swiper位移的距离
      } else {
        let nowTlanslate = slideCenter - swiperWidth / 2
        mySwiper.setWrapperTranslate(-nowTlanslate)
      }
    },
    // 滚动条滚动后nav动作
    scrollNav () {
      let top = document.documentElement.scrollTop
      let nav = document.getElementById('nav')
      let swiper = document.getElementById('swiper-container')
      if (top > 20) {
        nav.classList.add('active_1')
        swiper.classList.add('active_2')
      } else {
        nav.classList.remove('active_1')
        swiper.classList.remove('active_2')
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.swiperIndex = this.$route.params.id
    })
  },
  watch: {
    swiperIndex () {
      if (this.swiperIndex >= 0) {
        this.current = this.swiperIndex // class的id = 接受的params的id
        this.swiperPosition()
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.scrollNav)
  },
  deactivated () {
    window.removeEventListener('scroll', this.scrollNav)
  }
}
</script>

<style lang="stylus" scoped>
  .classify >>> .cube-scroll-content // 必须写 要不然不会滚动 当前页给cube-scroll-content设置display: inline-block;
    display inline-block
  .classify
    .navClassify
      height 260px
      background-size 100%
      .box
        position fixed
        top 0
        width 100%
        height 260px
        nav
          background #fff
          text-align center
          font-size 16px
          color #333
          padding 14px 0
          .cubeic-back
            font-size 18px
            position absolute
            left 3%
        .swiper-container
          width 100%
          height auto
          color #fff
          .swiper-slide
            text-align center
            padding 15px 0
            p
              font-size 15px
              transition all .2s ease-out
  .active
    color #f23030
    transform scale(1.1)
  .active_1
    border-bottom 1px solid #e5e5e5
  .active_2
    box-shadow  2px 2px 2px #e2dbdb
    color #000!important
    background #fff
</style>
